<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { FileTrayFull } from "@vicons/ionicons5";
import { useRouterPush } from "@/hooks/common/router";
import fileLib from "@/views/bid-materials/bid/modules/file-lib.vue";
import companyInfo from "@/views/bid-materials/bid/modules/company-info.vue";
import { useRoute } from "vue-router";
import BidAnalysis from "./modules/bid-analysis.vue";
import Duplicate from "./modules/duplicate.vue";

const { routerBack, routerPushByKey } = useRouterPush();

const menuValue = ref();

const formData = ref({
  type: [],
  name: "",
});

const menuOptions = ref([
  {
    value: 1,
    label: "标书生成记录",
  },
  {
    value: 2,
    label: "企业素材管理",
  },
  {
    value: 3,
    label: "标书解析记录",
  },
  {
    value: 4,
    label: "标书查重记录",
  },
]);

// 获取子组件的引用
const analysis = ref();

// 标书资源库
function changeLib(value: any) {
  menuValue.value = value;
  routerPushByKey("bid-materials", {
    query: {
      tab: value,
    },
  });
  // if (menuValue.value == 3) {
  //   // console.log(analysis.value);
  //   // analysis.value.getTableList();
  // }
}
const route = useRoute();

// 监听路由
watch(
  () => route.query.tab,
  (newVal, oldVal) => {
    if (route.query.tab) {
      menuValue.value = Number(route.query.tab);
    }
  },
);

onMounted(() => {
  menuValue.value = Number(route.query.tab);
});
</script>

<template>
  <NLayout :native-scrollbar="false">
    <NSpace vertical>
      <!--      <BackHeader-->
      <!--        title="标书素材"-->
      <!--        right-title="标书资源库"-->
      <!--        @back-click="routerBack"-->
      <!--      />-->
      <NSpace justify="center">
        <div class="purple-back">
          <div class="content">
            <div class="left">
              <div
                :class="[
                  'menu-item',
                  item.value == menuValue ? 'menu-active' : '',
                ]"
                v-for="item in menuOptions"
                :value="item.value"
                @click="changeLib(item.value)"
              >
                <img
                  v-show="item.value != menuValue"
                  class="folder"
                  src="@/assets/bid-materials/folder-loss.png"
                  alt=""
                />
                <img
                  v-show="item.value == menuValue"
                  class="folder"
                  src="@/assets/bid-materials/folder-focus.png"
                  alt=""
                />
                <span class="folder-name">{{ item.label }}</span>
              </div>
            </div>
            <div class="right">
              <fileLib v-show="menuValue == 1"></fileLib>
              <companyInfo v-show="menuValue == 2"></companyInfo>
              <BidAnalysis ref="analysis" v-show="menuValue == 3"></BidAnalysis>
              <Duplicate v-show="menuValue == 4"></Duplicate>
            </div>
          </div>
        </div>
      </NSpace>
    </NSpace>
  </NLayout>
</template>

<style scoped lang="scss">
.bg-layout {
  background: url("@/assets/imgs/edit-bg.png");
  background-size: 100% 100%;
}
.create-button {
  margin-right: 180px;
  margin-bottom: 30px;
  width: 240px;
  height: 72px;
  background: #836fff;
  border-radius: 8px;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
  line-height: 24px;
}
.purple-back {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 1890px;
  min-height: 897px;
  background: rgba(229, 231, 253, 0.6);
  box-shadow: 0px 0px 40px 0px rgba(131, 111, 255, 0.1);
  border-radius: 12px;
  border: 1px solid #faf9fd;
  .content {
    border-radius: 12px;
    margin: 35px 0px;
    width: 1830px;
    min-height: 865px;
    background-color: #ffffff;
    display: flex;
    .left {
      padding-top: 37px;
      width: 213px;
      border-right: 1px #ebeef5 solid;
      .menu-item {
        width: 213px;
        height: 52px;
        display: flex;
        justify-content: center;
        .folder {
          width: 16px;
          height: 16px;
          margin-top: 17px;
          margin-right: 10px;
        }
        .folder-name {
          height: 19px;
          font-weight: 500;
          font-size: 20px;
          color: #333333;
          line-height: 52px;
        }
        &:hover {
          cursor: pointer;
          .folder-name {
            color: #806cfe;
          }
        }
      }
      .menu-active {
        background-color: #e8ecfd;
        .folder-name {
          color: #806cfe;
        }
      }
    }
    .right {
      width: 1600px;
    }
  }
}
</style>
